<template>
  <div class="follow-box">
    <button class="favorite-button" @click="init">
      <div class="icon">
        <div class="star"></div>
      </div>
      <span>{{ lastFollowVal == 1 ? "取消关注" : "关注" }}</span>
    </button>
  </div>
</template>
<script>
import { gsap } from "gsap";
export default {
  data() {
    return {
      // 关注信息
      followInfo: [],
      // 最后一项 value
      lastFollowVal: 0,
      // 修改接口请求参数
      updateData: {},
    };
  },
  props: {
    editorId: {
      type: [String, Number],
      default: 999,
    },
    userId: {
      type: [String, Number],
      default: 999,
    },
  },
  mounted() {
    this.getFollowInfo();
  },
  methods: {
    init() {
      this.follow();
      document.querySelectorAll(".favorite-button").forEach((button) => {
        button.addEventListener("click", (e) => {
          e.preventDefault();

          if (button.classList.contains("animated")) {
            return;
          }
          button.classList.add("animated");

          gsap.to(button, {
            keyframes: [
              {
                "--star-y": "-36px",
                duration: 0.3,
                ease: "power2.out",
              },
              {
                "--star-y": "48px",
                "--star-scale": 0.4,
                duration: 0.325,
                onStart() {
                  button.classList.add("star-round");
                },
              },
              {
                "--star-y": "-64px",
                "--star-scale": 1,
                duration: 0.45,
                ease: "power2.out",
                onStart() {
                  button.classList.toggle("active");
                  setTimeout(() => button.classList.remove("star-round"), 100);
                },
              },
              {
                "--star-y": "0px",
                duration: 0.45,
                ease: "power2.in",
              },
              {
                "--button-y": "3px",
                duration: 0.11,
              },
              {
                "--button-y": "0px",
                "--star-face-scale": 0.65,
                duration: 0.125,
              },
              {
                "--star-face-scale": 1,
                duration: 0.15,
              },
            ],
            clearProps: true,
            onComplete() {
              button.classList.remove("animated");
            },
          });

          // 黑洞展开
          gsap.to(button, {
            keyframes: [
              {
                "--star-hole-scale": 0.8,
                duration: 0.5,
                ease: "elastic.out(1, .75)",
              },
              {
                "--star-hole-scale": 0,
                duration: 0.2,
                delay: 0.2,
              },
            ],
          });

          // 旋转
          gsap.to(button, {
            "--star-rotate": "360deg",
            duration: 1.55,
            clearProps: true,
          });
        });
      });
    },
    // 获取关注信息的方法
    getFollowInfo() {
      this.$http
        .get(
          `/follow?follow_userId=${this.editorId}&&followed_userId=${this.userId}`
        )
        .then((res) => {
          if (res.result[0]) {
            var lastIndex = res.result.length - 1;
            this.lastFollowVal = res.result[lastIndex].follow_value;
          }
        });
    },

    // 关注方法
    follow() {
      this.updateData.follow_userId = this.userId;
      this.updateData.followed_userId = this.editorId;
      this.updateData.follow_value = this.lastFollowVal == 1 ? "0" : "1";
      this.$http.post("/follow", this.updateData).then((res) => {
        if (res.code == 0) {
          this.$message({
            showClose: true,
            message: "操作成功",
            type: "success",
          });
        }
      });

      this.getFollowInfo();
    },
  },
};
</script>
<style scoped>
.favorite-button {
  --background-default: rgba(22, 24, 30, 0.3);
  --text-color-default: white;
  --star-color-default: #62677c;
  --star-face-color-default: #1f2128;
  --star-color-active: #f6c206;
  --star-face-color-active: #845901;
  --star-hole: #16181e;
  --star-hole-inner: #20232c;
  --button-y: 0px;
  --star-y: 0px;
  --star-scale: 1;
  --star-rotate: 0deg;
  --star-hole-scale: 0;
  --star-face-scale: 1;
  --text-x: 0px;
  --text-o: 1;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  border: none;
  background: none;
  min-width: 85px;
  padding: 5px 12px 5px 16px;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  color: var(--text-color-default);
  transform: translateY(var(--button-y)) translateZ(0);
  z-index: 99;
}
.favorite-button:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 9px;
  transition: transform 0.2s;
  transform: scale(var(--background-scale-x, 1), var(--background-scale-y, 1))
    translateZ(0);
  background: var(--background-default);
}
.favorite-button:active {
  --background-scale-x: 0.98;
  --background-scale-y: 0.96;
}
.favorite-button span {
  display: block;
  opacity: var(--text-o);
  transform: translateX(var(--text-x));
}
.favorite-button .icon {
  width: 36px;
  height: 119px;
  display: flex;
  pointer-events: none;
  position: relative;
  -webkit-clip-path: ellipse(150% 50% at 50% 50%);
  clip-path: ellipse(150% 50% at 50% 50%);
  margin: -100px 2px 0 -8px;
}
.favorite-button .icon:before {
  content: "";
  margin-top: auto;
  display: block;
  width: 36px;
  height: 12px;
  background: var(--star-hole);
  box-shadow: inset 0 3px 0 0 var(--star-hole-inner);
  border-radius: 100px/30px;
  transform: scale(var(--star-hole-scale));
  transform-origin: 50% 100%;
}
.favorite-button .icon .star {
  width: 20px;
  height: 19px;
  position: absolute;
  left: 8px;
  bottom: 0;
  transform: translateY(var(--star-y)) rotate(var(--star-rotate))
    scale(var(--star-scale));
  border-radius: var(--star-radius, 0px);
  background: var(--star-color, var(--star-color-default));
  -webkit-clip-path: var(
    --star-clip,
    polygon(
      10px 0,
      13px 6px,
      20px 7px,
      15px 12px,
      16px 19px,
      10px 15px,
      4px 19px,
      5px 12px,
      0 7px,
      7px 6px
    )
  );
  clip-path: var(
    --star-clip,
    polygon(
      10px 0,
      13px 6px,
      20px 7px,
      15px 12px,
      16px 19px,
      10px 15px,
      4px 19px,
      5px 12px,
      0 7px,
      7px 6px
    )
  );
  transition: border-radius 0.2s, background 0.2s, -webkit-clip-path 0.2s;
  transition: clip-path 0.2s, border-radius 0.2s, background 0.2s;
  transition: clip-path 0.2s, border-radius 0.2s, background 0.2s,
    -webkit-clip-path 0.2s;
}
.favorite-button .icon .star:before,
.favorite-button .icon .star:after {
  content: "";
  position: absolute;
  background: var(--star-face-color, var(--star-face-color-default));
  transition: background 0.2s, box-shadow 0.2s;
}
.favorite-button .icon .star:before {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  left: 7px;
  top: 8px;
  box-shadow: 4px 0 0 0 var(--star-face-color, var(--star-face-color-default));
  transform: scaleY(var(--star-face-scale));
}
.favorite-button .icon .star:after {
  width: 4px;
  height: 2px;
  border-radius: var(--star-face-radius, 2px 2px 0 0);
  left: 8px;
  top: 11px;
  transition: border-radius 0.2s;
}
.favorite-button.star-round {
  --star-clip: polygon(
    10px 0,
    20px 0,
    20px 7px,
    20px 12px,
    20px 19px,
    10px 19px,
    0 19px,
    0 12px,
    0 7px,
    0 0
  );
  --star-radius: 50%;
}
.favorite-button.active {
  --star-color: var(--star-color-active);
  --star-face-color: var(--star-face-color-active);
  --star-face-radius: 0 0 2px 2px;
}

.follow-box {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before,
*:after {
  box-sizing: inherit;
}
</style>
